<!-- Imports Polymer -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Imports Dependencies -->
<link rel="import" href="../bower_components/chemical-element-visualisation/chemical-element-visualisation.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">

<!-- Defines element markup -->
<dom-module id="periodic-table">

  <template>

    <custom-style>
      <style>

        :host
        {
          display: block;
        }

        h1
        {
          @apply --paper-font-common-base;
          color: var(--primary-color);
        }

        #chemical-element-visualisation-container
        {
          text-align: center;
          width: 25%;
        }

        #loading-bar-container
        {
          width: 100%;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        iron-pages
        {
          height: 100%;
        }

        chemical-element-visualisation
        {
          --chemical-element-visualisation-background-color: var(--background-color);
        }

      </style>
    </custom-style>

    <iron-pages selected="[[_selectedPage]]">
      <div id="loading-bar-container">
        <div id="chemical-element-visualisation-container">
          <h1>Elements</h1>
          <chemical-element-visualisation symbol="[[_pickRandomElementSymbol()]]"></chemical-element-visualisation>
        </div>
      </div>
      <div id="periodic-table-content-container">
        <periodic-table-content display="{{display}}"></periodic-table-content>
      </div>
      <div></div>
    </iron-pages>
    
  </template>

  <!-- Loads JavaScript -->
  <script src="periodic-table.js"></script>
</dom-module>
